<template>
  <div>
    <el-form ref="cateItem" :rules="rules" :model="cate" label-width="120px">
      <el-form-item label="分类标题" prop="cateName">
        <el-input v-model="cate.cateName" />
      </el-form-item>
      <el-form-item label="商品分类">
        
        <el-select v-model="cate.pid" placeholder="please select your zone">
          <el-option label="顶层分类" :value="-1" />
          <el-option
            v-for="cate in cates"
            :key="cate.id"
            :label="cate.cateName"
            :value="cate.pid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch
          v-model="cate.enable"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="分类图标">
        <!-- 文件上传组件 -->
        <el-upload
          class="upload-demo"
          action="/api/upload"
          name="file"
          accept="image/*"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传jpg/png/gif,且体积不能超出1m
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { fetchCateLists, updateCate, getCateDetail } from "@a/cateLists";
import { updateLists } from '@a/itemLists'
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { defineProps } from "vue";
// route是路由属性
const route = useRoute();
// router是路由实例和方法
const router = useRouter();

// 定义props验证
const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
})
// console.log(props.id); 能正常获取到id
const rules = reactive({
  cateName: [
    {
      required: true,
      message: "该字段必填",
    },
    {
      pattern: /^[\u4e00-\u9fa5]{3,7}$/,
      message: "请输入4到8位中文汉字组成",
    },
  ],
});

// 当前商品的默认信息
let cate = reactive({
  cateName: '',
  cateIcon: "",
  enable: 1, // 1启动 0 不启动
  pid: -1, // 父级分类id  -1代表 顶层分类
});
// 该商品可修改的信息
const cates = ref<any[]>([]);
const CateLists = () => {
  fetchCateLists().then((res) => {
    cates.value = res.data.data.lists;
  });
};
// 获取商品分类的详情
const get_CateDetail = () => {
  getCateDetail({
    id:props.id
  }).then((res) => {
    if (res.data.code === 200) {
      cate.cateName = res.data.data.cateName
    }
  });
};
// 上传文件 大小 
const beforeUpload = (file: any) => {
  // 限制上传文件的体积  byte
  if (file.size > 1024 * 1024) {
    alert("体积超出1M");
    return false;
  } else {
    return true;
  }
};

const uploadSuccess = (res: any) => {
  ElMessage({
      type: "success",
      message: "上传成功",
    });
  // 上传成功的回调
  // if (res.code === 200) {
  //   ElMessage({
  //     type: "success",
  //     message: "上传成功",
  //   });
  //   // cate.cateIcon = res.data.url;
  // }else{
  //   ElMessage({
  //       message: "上传失败",
  //       type: 'error'
  //   })
  // }
};
// 失败的钩子
const uploadError = (res: any) => {
  console.log(res);
    ElMessage({
      message: "上传失败，请重新上传",
    });
}
// 点击确定按钮的状态信息
const cateItem = ref<any>(null);
const onSubmit = () => {
  cateItem.value.validate().then(() => {
    // 用的是状态开关的接口
    updateLists(cate).then((res) => {
      if (res.data.code === 200) {
        // 成功后 弹出消息提示框提示用户
        ElMessage({
          message: res.data.msg,
          type: "success",
          duration: 1500,
          onClose: () => {
            // 刷新页面
            router.go(0);
          },
        });
      } else {
        ElMessage({
          message: res.data.msg,
          type: "error",
        });
      }
    });
  });
};

// 点击取消就刷新一下页面
const cancel = () => {
  router.go(0);
};
// 初始化前
onMounted(() => {
  CateLists();
  get_CateDetail()
});
</script>


<style scoped>

</style>